<template>
  <div class="main">
    <div>
      <div class="s-box" style="background-color: var(--main-html-backgroundColor)">
        <Tooltip v-if="showTitle">
          <template #title>
            <span>{{ titleTooltip }}</span>
          </template>
          <div class="title" style="color: var(--main-html-color)">
            {{ cardTitle }}
          </div>
        </Tooltip>
        <div class="content">{{ content }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Tooltip } from 'ant-design-vue';
  import { ref, watch, onMounted, nextTick } from 'vue';
  const props = defineProps({
    widgetData: {
      type: Object,
    },
    isResize: {
      type: Boolean,
    },
    dashboard: {
      type: Boolean,
    },
  });
  const showTitle = ref<boolean>(false);
  const cardTitle = ref<string>('html Card');
  const titleTooltip = ref<string>('html Card');
  const content = ref<string>('嘻嘻哈哈');
  watch(
    () => props.widgetData,
    (nVal: Recordable) => {
      if (!nVal) return;
      if (Object.keys(nVal).length === 0) return;
      // const { showTitle, title, titleTooltip, color, backgroundColor } = nVal;

      showTitle.value = nVal.showTitle;
      cardTitle.value = nVal.title;
      titleTooltip.value = nVal.titleTooltip;

      document.documentElement.style.setProperty('--main-html-color', nVal.color); // 改变颜色值
      document.documentElement.style.setProperty(
        '--main-html-backgroundColor',
        nVal.backgroundColor,
      ); // 改变颜色值
      nextTick(() => {});
    },
    {
      immediate: true,
      deep: true,
    },
  );

  onMounted(() => {});
</script>
<style lang="less" scoped>
  .main {
    display: flex;
    justify-content: center;
    margin-top: 10%;
  }

  .s-box {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;

    .title {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.85);
    }

    .value {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }

    .count {
      display: inline-block;
      font-size: 18px;
      color: #0bdba8;
    }
  }

  .deviceImg {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  .title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
  }

  .content {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 700;
    margin: 20px 0 0 40px;
  }

  :root {
    --main-html-color: rgba(0, 0, 0, 0.85); /* 默认颜色 */
    --main-html-backgroundColor: #fff;
  }
</style>
